@SPIN_CONTAINER_WIDTH: 25px;
@SPIN_BUTTON_AREA_WIDTH: 22px;
@TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH: 50px;

.dx-numberbox-spin-container {
    width: @SPIN_CONTAINER_WIDTH;

    .dx-state-disabled & {
        opacity: .5;
    }

    .dx-numberbox-spin-touch-friendly & {
        width: @TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH;
    }
}

.dx-numberbox-spin-up-icon {
    .dx-icon-spinup;
}

.dx-numberbox-spin-down-icon {
    .dx-icon-spindown;
}

.dx-numberbox-spin-up-icon,
.dx-numberbox-spin-down-icon {
    color: @IOS7_INPUT_PLACEHOLDER;
    font-weight: 600;
    .dx-icon-font-centered-sizing(16px);
}

.dx-state-active {
    &.dx-numberbox-spin-button {
        opacity: 0.4;
    }
}

.dx-numberbox-spin {
    &.dx-show-clear-button {
        .dx-texteditor-input {
            padding-right: @SPIN_BUTTON_AREA_WIDTH + @CLEAR_ICON_SIZE + 2 * @CLEAR_ICON_RIGHT;
        }

        &.dx-numberbox-spin-touch-friendly {
            .dx-texteditor-input {
                padding-right: @TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH + @CLEAR_ICON_SIZE + 2 * @CLEAR_ICON_RIGHT;
            }
        }
    }
    .validation-icon-position(@SPIN_BUTTON_AREA_WIDTH);

    &.dx-show-clear-button:not(.dx-texteditor-empty) {
        .validation-icon-position(@SPIN_BUTTON_AREA_WIDTH + @CLEAR_ICON_SIZE + @CLEAR_ICON_RIGHT);
    }
}

.dx-numberbox-spin-touch-friendly {
    .validation-icon-position(@TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH);

    &.dx-show-clear-button:not(.dx-texteditor-empty) {
        .validation-icon-position(@TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH + @CLEAR_ICON_SIZE + @CLEAR_ICON_RIGHT);
    }
}
.dx-rtl {
    .dx-numberbox,
    &.dx-numberbox {
        &.dx-numberbox-spin-touch-friendly.dx-show-clear-button .dx-texteditor-input {
            padding-left: @TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH + @CLEAR_ICON_SIZE + 2 * @CLEAR_ICON_RIGHT;
        }

        &.dx-numberbox-spin.dx-show-clear-button .dx-texteditor-input {
            padding-left: @SPIN_BUTTON_AREA_WIDTH + @CLEAR_ICON_SIZE + 2 * @CLEAR_ICON_RIGHT;
        }
    }
}
